<template>
    <header class="header">
      <h1>todos</h1>
      <input id="toggle-all" class="toggle-all" type="checkbox" >
      <label for="toggle-all"></label>
      <input
        v-model="name"
        class="new-todo"
        placeholder="输入任务名称-回车确认"
        autofocus
        @keydown.enter="add"
      />
    </header>
  </template>
<script setup>
import { ref } from 'vue'
import useTodoStore from '../stores/todos'
const todoStore = useTodoStore()

const name = ref('')
const add = () => {
  todoStore.add({
    name: name.value,
    isDone: true
  })
  name.value = ''
}
</script>